import React, { useState } from "react";
import { Layout, Input, Select, Card, Typography } from "antd";
import { useNavigate } from "react-router-dom";
import WorkerData from "../WorkList/workerData"; // 包含家政工作者信息的数据文件

const { Content } = Layout;
const { Option } = Select;
const { Search } = Input;

const HomePage = () => {
  const [searchValue, setSearchValue] = useState("");
  const [filterValue, setFilterValue] = useState("");
  const navigate = useNavigate(); // 调用 useNavigate 获取 navigate 函数

  const handleSearch = (value) => {
    setSearchValue(value);
  };

  const handleFilterChange = (value) => {
    setFilterValue(value);
  };

  // 根据搜索和筛选值过滤家政工作者数据
  const filteredWorkers = WorkerData.filter(
    (worker) =>
      worker.name.includes(searchValue) &&
      (filterValue === "" || worker.location.includes(filterValue))
  );

  const handleMoreInfo = (worker) => {
    navigate(`/workerPage/${worker.id}`, { state: { worker } });
  };

  return (
    <Card style={{ marginTop: 50 }}>
      <div>
        <Typography
          level={3}
          style={{
            textAlign: "center",
            marginBottom: 20,
            fontSize: 24,
            fontWeight: "bold",
          }}
        >
          热门服务
        </Typography>
        <Search
          placeholder="搜索家政工作者"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={handleSearch}
          style={{ marginTop: 20 }}
        />
        <Select
          defaultValue=""
          style={{ width: 200, marginTop: 20 }}
          onChange={handleFilterChange}
          placeholder="按地区筛选"
        >
          <Option value="">全部地区</Option>
          <Option value="深圳">深圳</Option>
          <Option value="福州">福州</Option>
          <Option value="上海">上海</Option>
          <Option value="宁波">宁波</Option>
          <Option value="西安">西安</Option>
          <Option value="厦门">厦门</Option>
          {/* 根据实际情况添加更多选项 */}
        </Select>

        <Content style={{ padding: "0 10px", marginTop: 24 }}>
          <div
            style={{
              background: "#fff",
              minHeight: 280,
            }}
          >
            <div
              style={{
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-between",
              }}
            >
              {filteredWorkers.map((worker) => (
                <Card
                  key={worker.id}
                  title={worker.name}
                  extra={
                    <a
                      href="/#"
                      onClick={(e) => {
                        e.preventDefault(); // 防止默认的页面刷新行为
                        handleMoreInfo(worker);
                      }}
                    >
                      更多信息
                    </a>
                  }
                  style={{ width: 400, marginBottom: 16 }}
                >
                  <p>年龄: {worker.age}</p>
                  <p>从业经验: {worker.experience}</p>
                  <p>好评率: {worker.rating}</p>
                  <p>地区: {worker.location}</p>
                  {/* 根据需要添加更多工作者信息 */}
                </Card>
              ))}
            </div>
          </div>
        </Content>
      </div>
    </Card>
  );
};

export default HomePage;
